{% extends "header.html" %}
{% load  cmdb_tag %}
{% block conten %}

  <!-- DataTables -->
  <link rel="stylesheet" href="/static/plugins/datatables/dataTables.bootstrap.css">

  
<div class="box">
	<div class="box-header">
		<h3 class="box-title">资产列表</h3>
		<div class="box-icon" style="float:right;margin-top:-5px;">
			<a href="#" class="btn-setting"><button type="submit" class="btn btn-primary wrench" style="height:30px;" data-toggle="modal" data-target="#myModal">新增</button>
			</a>
		</div>
	</div>
<!-- /.box-header -->
	<div class="box-body">
		<table id="example1" class="table table-bordered table-striped">
        	<thead>
            	<tr>
                    <th>资产编号</th>
					<th>机房</th>
					<th>类型</th>
					<th>服务器型号</th>
					<th>IP地址</th>
					<th>系统版本</th>
					<th>时间</th>
					<th>所属者</th>
					<th>操作</th>
                </tr>
            </thead>
            <tbody>
               {% for info in all %}
					<tr>
						<td style="line-height: 34px;">{{info.asset_num}}</td>
						<td class="center" style="line-height: 34px;">{{info.itroom}}</td>
						<td style="line-height: 34px;">{{info.Type}}</td>
						<td class="center" style="line-height: 34px;">{{info.server_model}}</td>
						<td class="center" style="line-height: 34px;">{{info.ip}}</td>
						<td style="line-height: 34px;">{{info.systemversion}}</td>
						<td style="line-height: 34px;">{% day_con info.time%}</td>
						<td style="line-height: 34px;">{{info.own}}</td>
						<td class="center" style="line-height: 34px;">
							<a class="btn btn-success" href="/asset/detail/{{info.id}}">
								<i class="halflings-icon white fa fa-fw fa-reorder"></i>  
							</a>
							<a class="btn btn-info" href="/asset/editor/{{info.id}}">
								<i class="halflings-icon white fa fa-fw fa-edit"></i>  
							</a>
							{% if power < 95 %}
							<a class="btn btn-danger" href="/asset/del/{{info.id}}">
								<i class="halflings-icon white fa fa-fw fa-trash"></i> 
							</a>
							{% endif %}
						</td>
					</tr>
					{% endfor %}
            </tbody>
                <tfoot>
                <tr>
                  	<th>资产编号</th>
					<th>机房</th>
					<th>类型</th>
					<th>服务器型号</th>
					<th>IP地址</th>
					<th>系统版本</th>
					<th>时间</th>
					<th>所属者</th>
					<th>操作</th>
                </tr>
                </tfoot>
        </table>
    </div>
<!-- /.box-body -->
</div>
<style type="text/css">
modal-header {padding: 9px 15px;border-bottom: 1px solid #eee;}
</style>


<div class="modal fade" id="myModal">
          <div class="modal-dialog">
            <div class="modal-content" style="margin-top: 100px;">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">新增资产</h4>
              </div>
              <div class="modal-body">
                <p>
                <a href="/asset/add/"><span class="label label-success" style="font-size:14px;height:25px;line-height:25px;width:85px;text-align:center;">服务器IDC</span></a>
			<a href="/asset/network/add"><span class="label label-success" style="font-size:14px;height:25px;line-height:25px;width:110px;text-align:center;">网络及安全设备</span></a>
			<a href="/asset/work/add"><span class="label label-success" style="font-size:14px;height:25px;line-height:25px;width:85px;text-align:center;">办公设备</span></a>
                
                </p>
              </div>
              </div>
          </div>
</div>




<!-- DataTables -->
<script src="/static/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="/static/plugins/datatables/dataTables.bootstrap.min.js"></script>
<!-- SlimScroll -->
<script src="/static/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="/static/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/static/dist/js/demo.js"></script>
<!-- page script -->
<script>
  $(function () {
    $("#example1").DataTable();
    $('#example2').DataTable({
      "paging": true,
      "lengthChange": false,
      "searching": false,
      "ordering": true,
      "info": true,
      "autoWidth": false
    });
  });
</script>

{% endblock %}